import React, { Component } from 'react'
import { NavBar, List,Button,Toast } from 'antd-mobile'
import './index.less';
import axios from 'axios';
export default class UserCenter extends Component {
    state = {
        userInfo: {}
    }
    render() {
        return (
            <div className="center-container">
                {/* 顶部导航 start */}
                <NavBar style={{background: 'white'}} back={null}>个人中心</NavBar>
                {/* 顶部导航 end */}

                {/* 图片展示 start */}
                <div className="profile">
                    <img src={this.state.userInfo.avatar} alt="" />
                    <p>欢迎, 用户 {this.state.userInfo.username}</p>
                </div>
                {/* 图片展示 end */}

                {/* 个人信息 start */}
                <div className="user-info">
                <List>
                    <List.Item>
                        <p>昵称</p>
                        <p>{this.state.userInfo.nickName}</p>
                    </List.Item>
                    <List.Item>
                        <p>手机</p>
                        <p>{this.state.userInfo.phone}</p>
                    </List.Item>
                </List>
                </div>
                {/* 个人信息 end */}
                <div className="h-20"></div>
                <div className="h-20"></div>
                <div className="h-20"></div>
                <Button size="large" color="danger" block onClick={this.logout}>退出登录</Button>
            </div>
        )
    }

    //退出登录
    logout = async () => {
        //发送请求
        let result = await axios.post('/logout');
        //
        // console.log(result);
        if(result.data.code === 20000){
            Toast.show({
                icon: 'success',
                content: '退出成功',
              });
            //跳转到登录页面
            this.props.history.push('/login');
        }else{
            Toast.show({
                icon: 'fail',
                content: '退出失败, 请稍后再试',
              });
        }
    }


    //钩子函数
    async componentDidMount(){
        let result = await axios.post('/login/verify');
        if(result.data.code === 20000){
            this.setState({
                userInfo: result.data.data
            })
        }else{
            Toast.show({
                icon: 'fail',
                content: '还没有登录, 请登录',
              })
            //跳转到登录页面
            this.props.history.push('/login');
        }
    }
}
